<template>
  <div class="main-right-top">
    <MenuUnfoldOutlined v-if="collapsed" class="collapse-ic" @click="setCollapse"/>
    <MenuFoldOutlined v-else class="collapse-ic" @click="setCollapse"/>
    <a-breadcrumb>
      <a-breadcrumb-item class="bread-own" @click="router.push('/')">
        <span>首页</span>
      </a-breadcrumb-item>
      <a-breadcrumb-item class="bread-own-toother">
        <span>{{ meta.title }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="main-center-space"></div>
    <AppstoreOutlined class="to-main-ic"/>
    <ExpandOutlined class="fulle-ic"/>
    <a-dropdown :trigger="['click']">
      <span class="right-dropdown">
        <UserOutlined class="d-left"/>
        <span class="d-span">{{ name }}</span>
        <CaretDownOutlined class="d-right"/>
      </span>
      
      <template #overlay>
        <a-menu>
          <a-menu-item key="0">
            修改密码
          </a-menu-item>
          <a-menu-item key="1">
            退出登录
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
import { computed } from 'vue'
import { MenuFoldOutlined, MenuUnfoldOutlined, AppstoreOutlined ,ExpandOutlined,CaretDownOutlined,UserOutlined  } from '@ant-design/icons-vue';
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

export default {
  components: {MenuFoldOutlined, MenuUnfoldOutlined ,AppstoreOutlined,ExpandOutlined ,CaretDownOutlined, UserOutlined},
  setup(){
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const { meta } = route

    const name = computed(() => store.state.userMsg.name)
    const collapsed = computed(() => store.state.collapsed)

    function setCollapse(){
      store.commit('setCollapsed')
    }

    return {router, meta, name, store, setCollapse, collapsed}
  }
}
</script>

<style scoped lang="less">
  .main-right-top{
    height: 46px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0px 12px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, #009688 0%, #02c26e 100%);
    .main-center-space{
      flex: 1;
    }
    .right-dropdown{
      color: white;
      cursor: pointer;
      .d-left{
        color: white;
        font-size: 18px;
        transform: translateY(2px);
        margin-right: 2px;
      }
      .d-right{
        transform: translateY(2px);
      }
      .d-span{

      }
    }
    .to-main-ic{
      font-size: 24px;
      margin-right: 10px;
      color: white;
      cursor: pointer;
    }
    .fulle-ic{
      font-size: 20px;
      margin-right: 10px;
      color: white;
      cursor: pointer;
    }
    .collapse-ic{
      font-size: 20px;
      color: white;
      margin-right: 18px;
      cursor: pointer;
    }
    /deep/.bread-own{
      color: #00cca2;
      cursor: pointer;
    }
    /deep/.bread-own-toother{
      color: white;
    }
    /deep/.ant-breadcrumb-separator{
      color: #d4cbcb;
      cursor: default;
    }
  }
</style>